<template>
  <view
    class="cutting-line"
    :style="{ marginTop: marginTop + 'rpx', marginBottom: marginBottom + 'rpx', backgroundColor }"
  ></view>
</template>

<script setup lang="ts">
  import { propTypes } from '@/utils/propTypes';
  import { type PropType } from 'vue';

  defineProps({
    marginTop: propTypes.number.def(30),
    marginBottom: propTypes.number.def(30),
    backgroundColor: {
      type: String as PropType<string | 'transparent'>,
      default: '#DDDDDD',
    },
  });
</script>

<style lang="scss" scoped>
  .cutting-line {
    width: 100%;
    height: 1px;
  }
</style>
